<template>
	<view class="scenceIndex">
		<view id="cover" @click="isCover" v-if="isShow">
			<view class="changeCityList">
				<text class="changeCityListItem" v-for="item in changeCityList" @click="selectCity(item.name)">
					{{item.name}}
				</text>
			</view>
		</view>

		<view class="" style="margin: 50upx;">
			目的地
		</view>
		<view class="scenceIndexSearch">

			<view class="">

				<input class="uni-input SearchInput" v-model="searchCityName" placeholder="搜索酒店" />
				<!-- 						<text class="" style="position: absolute;top: 10upx;right: 200upx;color: #2B91E2;z-index: 22;" @click="searchCity">搜索</text> -->
			</view>
			<view class="" style="position: absolute;top: 10upx;right: 50upx;z-index: 23;" @click="changeCity">
				<image src="../../static/img/icon_scence_more.png" style="width: 20upx;height: 10upx;margin-right: 10upx;" class=""></image>
				{{localCity}}
			</view>
		</view>
		<view class="checkin">
			<view class="checkin-date-picker">
				<view class="fz13 h-c checkin-date-left" @click="onShowDatePicker('date', 0)">
					<view class="h-c7">入住</view>
					<view class="fz18 font-weight date">{{indate.split("年")[1]}}</view>
				</view>
				<view class="h-c7 fz13">
					{{days}}晚
				</view>
				<view class="fz13 h-c checkin-date-left" @click="onShowDatePicker('date', 1)">
					<view class="h-c7">离店</view>
					<view class="fz18 font-weight date">{{outdate.split("年")[1]}}</view>
				</view>
			</view>
			<mx-date-picker :show="showPicker" :type="type" :value="value" :showHoliday="false" @confirm="onSelected" @cancel="oncancel" />
		</view>
		<view class="counterSubmit" @click="searchHotel">
			查找酒店
		</view>
		<view class="" style="background:#F5F5F5;padding-top: 10upx;">
			<view class="" style="margin-top:10upx;;background: white;">
				<view style="font-size: 36upx; font-weight: bold;padding: 50upx;">
					相关推荐
				</view>
				<view class="cityList">
					<view class="cityListItem" v-for="item in sortList">
						<image :src="item.strategyImg" style="width: 400upx;height: 250upx;" class="noDataImg"></image>
						<view class="cityListItemBom">
							<!-- 										<view class="cityListItemName">
												{{item.variousName}}
										</view> -->
							<view class="">
								{{item.recommendNum}}浏览
							</view>
							<!-- 						<view class="deliciousListTag">
											<view class="deliciousListTagItem" v-for="(child, _index1) in item.promptLabel" v-if="child != ''" :key="_index1">
												{{child}}
											</view>
										</view> -->
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"
	export default {
		onLoad: function(options) {
			if(options&&options.city) {
				this.localCity = options.city;
			} else {
				this.localCity = this.pub.getLocalcity();
			}
		},
		data() {
			return {
				localCity: "兰州市",
				tabVal: 0,
				sortList: [],
				changeCityList: [],
				searchCityName: '',
				isShow: false,
				showPicker: false,
				date: '2019/01/01',
				range: ['2019/01/01', '2019/01/06'],
				type: 'date',
				value: '',
				wdate: 0, // 0 表示入住时间 1表示离店日期
				indate: '',
				outdate: '',
				in_date: '',
				out_date: '',
				days: 1,
			}
		},
		components: {
			MxDatePicker,
		},
		mounted() {
			let date = new Date()
			let y = date.getFullYear()
			let m = date.getMonth() + 1
			let d = date.getDate()

			let date2 = new Date()
			date2.setDate(date2.getDate() + 1)
			let y2 = date2.getFullYear()
			let m2 = date2.getMonth() + 1
			let d2 = date2.getDate()

			this.date = y + '/' + m + '/' + d;
			this.indate = y + '年' + (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日'
			this.outdate = y2 + '年' + (m2 < 10 ? ('0' + m2) : m2) + '月' + (d2 < 10 ? ('0' + d2) : d2) + '日'

			let out = y + '/' + m + '/' + (+d + 1);
			this.in_date = date.getTime()
			this.out_date = date2.getTime()
		},
		onShow() {
			// this.getSort();
			this.getData()
		},
		methods: {
			onShowDatePicker(type, i) { //显示
				if (i == 1) {
					let date = new Date()
					let y = date.getFullYear()
					let m = date.getMonth() + 1
					let d = date.getDate()
					this.date = y + '/' + m + '/' + (+d + 1);
				}
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
				this.wdate = i

			},
			onSelected(e) { //选择
				if (e) {
					this[this.type] = e.value;
					let date_ = ''
					// 					let in_date = ''
					// 					let out_date = ''
					date_ = this.date.split('/')
					if (this.wdate == 0) {
						let date = new Date()
						let now_times = ''
						let choose_times = ''
						let y = date.getFullYear()
						let m = date.getMonth() + 1
						let d = date.getDate()
						now_times = new Date(y + '/' + m + '/' + d).getTime();
						choose_times = new Date(this.date).getTime()
						if (choose_times - now_times < 0) {
							this.timelimit('入店时间不能小于今天！')
							return false
						}
						this.in_date = (new Date(e.value)).getTime()
					}
					if (this.wdate == 1) {
						this.out_date = (new Date(e.value)).getTime()
					}
					// 					console.log(e.value)
					// 					console.log(this.in_date)
					// 					console.log(this.out_date)
					// 					console.log((this.out_date - this.in_date))
					// return false
					if ((this.out_date - this.in_date) < 24 * 60 * 60 * 1000) {
						this.timelimit('离店时间必须大于当天时间！')
						return false
					} else {
						if (this.wdate == 0) {
							this.indate = date_[0] + '年' + date_[1] + '月' + date_[2] + '日'
						}
						if (this.wdate == 1) {
							this.outdate = date_[0] + '年' + date_[1] + '月' + date_[2] + '日'
						}
						let days = this.out_date - this.in_date
						this.days = parseInt(days / (1000 * 60 * 60 * 24))
					}
					this.showPicker = false;
				}
			},
			oncancel() {
				this.showPicker = false;
			},
			searchHotel() {
				uni.navigateTo({
					url: '/pages/scenicOrder/hotelIndex?item=' + encodeURIComponent(JSON.stringify(items)),
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			isCover() {
				this.isShow = false;
			},
			selectCity(name) {
				this.isShow = false;
				if (this.localCity != name) {
					this.localCity = name;
					this.getData();
				}
				document.body.style.overflow = "auto";
			},
			changeCity() {
				this.isShow = !this.isShow;
				if (this.isShow) {
					this.changeCityList = this.pub.getCities();
					if (!this.changeCityList || this.changeCityList.length == 0) {
						this.getCities()
					}
				}
				document.body.style.overflow = "hidden";
			},
			//获取数据
			getCities() {
				this.$postApi(this.$path.GET_CITY_LIST, {
					parentId: "14000",
				}).then(data => {
					if (data.data.success) {
						this.changeCityList = data.data.reListData;
						this.pub.setCities(this.changeCityList);
					}
				})
			},
			//获取数据
			getData() {
				this.$postApi(this.$path.GET_STRATEGY_LIST, {
					strategyId: '',
					addressCity: this.localCity,
					page: 1,
					rows: 12,
					strategyName: '',
					descType: 1,
					strategyType: 3
				}).then(data => {
					if (data.data.success) {
						this.sortList = data.data.rows
						for (let i = 0; i < data.data.rows.length; i++) {
							// data.data.rows[i].img = this.pub.fmtImgUrl(data.data.rows[i].img);
							data.data.rows[i].businessLabel = data.data.rows[i].businessLabel.split("；");
						}
					}
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	#cover {
		position: fixed;
		left: 0px;
		top: 40px;
		background-color: #000;
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		// filter:alpha(opacity=60);   
		// display:none; 
		z-Index: 20;

		.changeCityList {
			// position:absolute;left:0px;top:0px;
			background-color: white;
			width: 100%;
			height: 280upx;
			opacity: 1;
			z-Index: 21;

			// display: flex;
			// filter:alpha(opacity=0); 
			.changeCityListItem {
				border: 1upx solid #16BF5A;
				color: #16BF5A;
				word-wrap: break-all;
				margin: 20upx;
				margin-top: 10upx;
				padding: 5upx;
				display: inline-block;
			}
		}
	}

	.cityList {
		margin-left: 50upx;
		display: flex;
		overflow-x: scroll;

		.cityListItem {
			// display: flex;
			// flex-direction: column;
			margin: 10upx;
			// padding: 0upx 34upx;
			// 		background: rgba(255, 255, 255, 1);
			// 		box-shadow: 0px 3px 20px 0px rgba(140, 140, 140, 0.26);
			border-radius: 10upx;
			// height: 235upx;
			box-sizing: border-box;

			.cityListItemBom {
				margin: 10upx;
				padding-bottom: 20upx;

				.cityListItemName {
					font-size: 36upx;
					font-weight: bold;
				}
			}

		}
	}

	.scenceIndexSearch {
		position: relative;
		// 		top: 50upx;
		width: 100%;
		height: 130upx;
		// padding-bottom: 50upx;
		z-index: 10;
		background: white;

		.SearchInput {
			border-bottom: 1px solid #cccccc;
			margin: 50upx;
		}
	}

	.checkin {

		// padding: 20upx 0upx;
		.checkin-date-picker {
			margin: 50upx;
			border-bottom: 1upx solid #F5F5F5;
			padding: 36upx 78upx 25upx 81upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.checkin-date-left {
				.date {
					padding-top: 16upx;
				}
			}
		}
	}

	.counterSubmit {
		height: 86upx;
		width: 90%;
		text-align: center;
		line-height: 86upx;
		font-size: 36upx;
		color: #FFFFFF;
		border-radius: 10upx;
		background: rgba(16, 142, 233, 1);
		margin: 50upx auto;
	}
</style>
